<template>
    <div class="card">
        <el-avatar :src="userInfo.avatar" :size="70"></el-avatar>
        <div class="devide"></div>
        <div class="info">
            <div class="id">ID：{{ userInfo.id }}</div>
            <div class="name">用户名：{{ userInfo.name }}</div>
            <div class="email">邮箱：{{ userInfo.email }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface UserInfoProps {
    // eslint-disable-next-line no-undef
    userInfo: User;
}
defineProps<UserInfoProps>();
</script>

<style lang="scss" scoped>
.card {
    width: 300px;
    height: 100px;
    background-color: white;
    border: 1px solid rgba(201, 181, 181, 0.5);
    border-radius: 5px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    .devide {
        width: 1px;
        height: 70%;
        background-color: rgba(201, 181, 181, 0.5);
        margin-left: 20px;
        margin-right: 20px;
    }

    .info {
        div {
            margin-bottom: 10px;
            font-size: 14px;
        }
    }

    &:hover {
        box-shadow: 0 0 10px 1px rgba($color: #000000, $alpha: 0.5);
    }
}
</style>
